<template>
	<div class="system-menu-container">
		<el-card shadow="hover">
			<div class="system-menu-search mb15">
				<el-input size="default" placeholder="请输入菜单名称" style="max-width: 180px"> </el-input>
				<el-button size="default" type="primary" class="ml10">
					<el-icon>
						<ele-Search />
					</el-icon>
					查询
				</el-button>
				<el-button v-auth="'system.menu.add'" size="default" type="primary" plain class="ml10" @click="handleMenu(0, null)">
					<el-icon>
						<ele-FolderAdd />
					</el-icon>
					新增菜单
				</el-button>
			</div>
			<el-table :data="menuTableData" style="width: 100%" row-key="path" :tree-props="{ children: 'children', hasChildren: 'hasChildren' }">
				<el-table-column label="菜单名称" show-overflow-tooltip>
					<template #default="scope">
						<SvgIcon :name="scope.row.meta.icon" />
						<span class="ml10">{{ scope.row.meta.title }}</span>
					</template>
				</el-table-column>
				<el-table-column prop="path" label="路由路径" show-overflow-tooltip></el-table-column>
				<el-table-column label="组件路径" show-overflow-tooltip>
					<template #default="scope">
						<span>{{ scope.row.component }}</span>
					</template>
				</el-table-column>
				<el-table-column label="权限标识" show-overflow-tooltip>
					<template #default="scope">
						<span>{{ scope.row.permission }}</span>
					</template>
				</el-table-column>
				<el-table-column label="排序" show-overflow-tooltip width="80">
					<template #default="scope">
						{{ scope.row.sort }}
					</template>
				</el-table-column>
				<el-table-column label="类型" show-overflow-tooltip width="80">
					<template #default="scope">
						<el-tag v-if="scope.row.type === 0" type="success" size="small">菜单</el-tag>
						<el-tag v-else-if="scope.row.type === 1" type="warning" size="small">按钮</el-tag>
					</template>
				</el-table-column>
				<el-table-column label="操作" show-overflow-tooltip width="140">
					<template #default="scope">
						<el-button v-auth="'system.menu.add'" v-if="scope.row.type === 0" size="small" text type="primary" @click="handleMenu(0, scope.row)"
							>新增</el-button
						>
						<el-button size="small" text type="primary" @click="handleMenu(1, scope.row)">修改</el-button>
						<el-button size="small" text type="primary" @click="handleMenu(2, scope.row)">删除</el-button>
					</template>
				</el-table-column>
			</el-table>
		</el-card>
		<SetMenu
			v-model="isShowEditDialog"
			v-if="isShowEditDialog"
			:menuDataList="menuTableData"
			:editData="editData"
			:type="handleType"
			@refresh="getMenuLists"
		/>
		<!-- <EditMenu v-model="isShowEditDialog" v-if="isShowEditDialog" :menuDataList="menuTableData" :editData="editData" /> -->
	</div>
</template>

<script setup name="systemMenu">
import { ElMessageBox, ElMessage } from 'element-plus';

import { getMenuList, delMenu } from '@/api/system/menu';
import { initBackEndControlRoutes } from '@/router/backEnd';

import SetMenu from '@/views/system/menu/component/setMenu.vue';
// import EditMenu from '@/views/system/menu/component/editMenu.vue';

// 获取 pinia 中的路由
const menuTableData = ref([]);
const getMenuLists = async () => {
	let res = await getMenuList();
	if (res.code === 0) {
		menuTableData.value = res.data;
	} else {
		ElMessage.error(res.message);
	}
};
getMenuLists();

// 打开新增/编辑菜单弹窗
const isShowEditDialog = ref(false);
const handleType = ref(0); //0新增/1编辑/2删除
const editData = ref(null);
const handleMenu = (type, row) => {
	if (type === 2) {
		onTabelRowDel(row);
	} else {
		handleType.value = type;
		editData.value = row;
		isShowEditDialog.value = true;
	}
};
// 删除当前行
const onTabelRowDel = (row) => {
	ElMessageBox.confirm(`此操作将永久删除路由：${row.path}, 是否继续?`, '提示', {
		confirmButtonText: '删除',
		cancelButtonText: '取消',
		type: 'warning',
	})
		.then(async () => {
			let res = await delMenu({ id: row.id });
			if (res.code === 0) {
				ElMessage.success('删除成功');
				initBackEndControlRoutes();
				getMenuLists();
			} else {
				ElMessage.error('删除失败');
			}
		})
		.catch(() => {});
};
</script>
